<template>
  <div class="dashboard-container">
    <div class="addWorkContent">
      <div class="title">加班规则</div>
      <div class="butList">
        <div @click="addHander('add')" style="display: inline-block;cursor: pointer"><span>+</span> 创建加班规则</div>
      </div>
      <div class="cont">
        <div class="tableCont">
          <el-table ref="multipleTable" :data="tableData" style="width: 100%">
            <el-table-column align="center" label="加班规则名称" width="200" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column align="center" label="规则内容">
              <template slot-scope="scope">
                <p>工作日：{{ typeRule(scope.row.ruleContent, 1) }}</p>
                <p>休息日：{{ typeRule(scope.row.ruleContent, 2) }}</p>
                <p>节假日：{{ typeRule(scope.row.ruleContent, 3) }} </p>
              </template>
            </el-table-column>
            <el-table-column align="center" label="应用范畴" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-for="item in scope.row.attendGroups" :key="item.id"> {{ item.name }} </span>
              </template>
            </el-table-column>
            <el-table-column width="120" prop="address" center label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <span class="actLab" @click="editerHander(scope.row)">编辑</span>
                <span class="actLab" @click="delHander(scope.row)">删除</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="pageList">
            <el-pagination
              v-if="total > pageSize"
              layout="prev, pager, next"
              @current-change="handlePageChange"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="setatte">
        <div><span class="titAtte">考勤设置：</span> <span @click="changeAtteHander" style="color:#3345ff;cursor: pointer">修改</span></div>
        <div><span class="titAtte">最小加班单位：</span> <span>{{showRuleChg('val',1)}}</span><span class="des"> {{showRuleChg('namedes',1)}} </span></div>
        <div><span class="titAtte">计算规则：</span> <span>{{showRuleChg('namedes',1)}}</span><span class="des">例如：{{showRuleChg('des',1)}}</span></div>
        <div><span class="titAtte">日时长折算：</span> <span>{{ effectiveHoursEverydaySh }}小时=1天</span></div>
      </div>
      <!-- 考勤设置 - start -->
      <el-dialog title="修改加班单位" :visible.sync="setAtteDialog" width="40%" center>
        <div class="setatteDialog">
          <div><span class="titAtte">规则名称：</span>
            <el-select v-model="ruletypeId" size="mini" placeholder="请选择活动区域">
              <el-option v-for="item in ruleData" :label="item.name" :key="item.overtimeUnit" :value="item.overtimeUnit"></el-option>
            </el-select>
          </div>
          <div class="des"><span>{{showRuleChg('namedes')}}</span> </div>
          <div><span class="titAtte">计算规则：</span> <span>{{showRuleChg('rule')}}</span></div>
          <div class="des"><span></span> 例如：{{showRuleChg('des')}}</div>
          <div><span class="titAtte">日时长折算：</span> <span><input type="text" class="miniInput" v-model="effectiveHoursEveryday" size="mini"> 小时=天</span></div>
        </div>
        <div class="submitBox">
          <el-button size="mini" style="color:#3345ff;border-color: #3345ff" @click="() => setAtteDialog = false">取 消</el-button>
          <el-button size="mini" class="submit" type="primary" @click="releTypeSubmit">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 考勤设置 - end -->
      <!-- 添加编辑 -->
      <el-dialog :title="title" :visible.sync="dialogVisible" width="70%" center>
        <div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
            <el-form-item label="规则名称" prop="name" size="mini">
              <el-input v-model="ruleForm.name" style="width: 174px;" placeholder="最多10个中英文字符"></el-input>
            </el-form-item>
            <el-form-item label="应用范围" prop="attendGroups">
              <el-select v-model="ruleForm.attendGroups" multiple size="mini" placeholder="请选择活动区域">
                <el-option v-for="item in orgList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="风险预警">
              <el-select v-model="ruleForm.alarmUnit" size="mini" style="width: 80px;" placeholder="请选择">
                <el-option label="按天" value="1"></el-option>
                <el-option label="按月" value="2"></el-option>
                <el-option label="按年" value="3"></el-option>
              </el-select>
               加班累计超过 <input type="number" class="miniInput" v-model="ruleForm.alarmHours" size="mini"> 小时后，提醒审批人或直接主管
              <div>关爱员工的身体健康，同时避免用工风险</div>
            </el-form-item>
            <div class="addLabTit">
              <el-radio-group v-model="ruleType" size="mini">
                <el-radio-button label="1">工作日</el-radio-button>
                <el-radio-button label="2">休息日</el-radio-button>
                <el-radio-button label="3">节假日</el-radio-button>
              </el-radio-group>
            </div>
            <div class="addLabCont" v-show="ruleType == 1">
              <el-form-item label="允许加班">
                <el-switch v-model="ruleForm.workDay.allow"></el-switch>
              </el-form-item>
              <el-form-item label="计算方式" v-if="ruleForm.workDay.allow" prop="delivery">
                <el-radio-group v-model="ruleForm.workDay.computeType">
                  <div class="labelItems">
                    <el-radio label="1">按审批时长计算</el-radio>
                  </div>
                  <div class="labelItems">
                    <el-radio label="2">在审批的时段内，按打卡时长计算</el-radio>
                  </div>
                  <div class="labelItems">
                    <el-radio label="3">无需审批，按打卡时长计算</el-radio>
                  </div>
                </el-radio-group>
                <div>下班 <input type="text" v-model="ruleForm.workDay.startAfterOffWork" class="miniInput" size="mini"> 分钟后，计入加班</div>
                <div>当天加班少于 <input type="text" v-model="ruleForm.workDay.lessMinutesCurDay" class="miniInput" size="mini"> 分钟后，不计入加班</div>
              </el-form-item>
              <el-form-item label="扣除休息时间" prop="delivery">
                <el-switch v-model="ruleForm.workDay.allowBanRest"></el-switch>
              </el-form-item>
              <el-form-item label="计算方式" v-if="ruleForm.workDay.allowBanRest" prop="delivery">
                <el-radio-group v-model="ruleForm.workDay.banRestType">
                  <div class="clearInput">
                    <el-radio label="1">设置休息时段</el-radio>
                  </div>
                  <div v-show="ruleForm.workDay.banRestType == 1" class="clearInput"><input type="text" v-model="ruleForm.workDay.restStartTime" class="miniInput"> - <input type="text" v-model="ruleForm.workDay.restEndTime" class="miniInput"></div>
                  <div class="clearInput">
                    <el-radio label="2">按加班时长扣除</el-radio>
                  </div>
                  <div v-show="ruleForm.workDay.banRestType == 2" class="clearInput">
                    每满 <input type="text" v-model="ruleForm.workDay.matchHours" class="miniInput" size="mini"> 小时，
                    扣除 <input type="text" v-model="ruleForm.workDay.banHours" class="miniInput" size="mini"> 小时
                  </div>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="记为调休或者加班" prop="delivery">
                <el-switch v-model="ruleForm.workDay.allowMakeUp"></el-switch>
              </el-form-item>
              <el-form-item v-if="ruleForm.workDay.allowMakeUp" label=" " prop="delivery">
                <el-radio-group v-model="ruleForm.workDay.makeUpType">
                  <div class="labelItems">
                    <el-radio label="1">记为调休时长，每年12月31日作废</el-radio>
                  </div>
                  <div class="labelItems">
                    <el-radio label="2">记为加班费</el-radio>
                  </div>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="addLabCont" v-show="ruleType == 2">
              <el-form-item label="允许加班">
                <el-switch v-model="ruleForm.playDay.allow"></el-switch>
              </el-form-item>
              <el-form-item label="计算方式" v-if="ruleForm.playDay.allow" prop="delivery">
                <el-radio-group v-model="ruleForm.playDay.computeType">
                  <div class="labelItems">
                    <el-radio label="1">按审批时长计算</el-radio>
                  </div>
                  <div class="labelItems">
                    <el-radio label="2">在审批的时段内，按打卡时长计算</el-radio>
                  </div>
                  <div class="labelItems">
                    <el-radio label="3">无需审批，按打卡时长计算</el-radio>
                  </div>
                </el-radio-group>
                <div>下班 <input type="text" v-model="ruleForm.playDay.startAfterOffWork" class="miniInput" size="mini"> 分钟后，计入加班</div>
                <div>当天加班少于 <input type="text" v-model="ruleForm.playDay.lessMinutesCurDay" class="miniInput" size="mini"> 分钟后，不计入加班</div>
              </el-form-item>
              <el-form-item label="扣除休息时间" prop="delivery">
                <el-switch v-model="ruleForm.playDay.allowBanRest"></el-switch>
              </el-form-item>
              <el-form-item label="计算方式" v-if="ruleForm.playDay.allowBanRest" prop="delivery">
                <el-radio-group v-model="ruleForm.playDay.banRestType">
                  <div class="clearInput">
                    <el-radio label="1">设置休息时段</el-radio>
                  </div>
                  <div v-show="ruleForm.playDay.banRestType == 1" class="clearInput"><input type="text" v-model="ruleForm.playDay.restStartTime" class="miniInput"> - <input type="text" v-model="ruleForm.playDay.restEndTime" class="miniInput"></div>
                  <div class="clearInput">
                    <el-radio label="2">按加班时长扣除</el-radio>
                  </div>
                  <div v-show="ruleForm.playDay.banRestType == 2" class="clearInput">
                    每满 <input type="text" v-model="ruleForm.playDay.matchHours" class="miniInput" size="mini"> 小时，
                    扣除 <input type="text" v-model="ruleForm.playDay.banHours" class="miniInput" size="mini"> 小时
                  </div>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="记为调休或者加班" prop="delivery">
                <el-switch v-model="ruleForm.playDay.allowMakeUp"></el-switch>
              </el-form-item>
              <el-form-item v-if="ruleForm.playDay.allowMakeUp" label=" " prop="delivery">
                <el-radio-group v-model="ruleForm.playDay.makeUpType">
                  <div class="labelItems">
                    <el-radio label="1">记为调休时长，每年12月31日作废</el-radio>
                  </div>
                  <div class="labelItems">
                    <el-radio label="2">记为加班费</el-radio>
                  </div>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="addLabCont" v-show="ruleType == 3">
              <el-form-item label="允许加班">
                <el-switch v-model="ruleForm.holiday.allow"></el-switch>
              </el-form-item>
              <el-form-item label="计算方式" v-if="ruleForm.holiday.allow" prop="delivery">
                <el-radio-group v-model="ruleForm.holiday.computeType">
                  <div class="labelItems">
                    <el-radio label="1">按审批时长计算</el-radio>
                  </div>
                  <div class="labelItems">
                    <el-radio label="2">在审批的时段内，按打卡时长计算</el-radio>
                  </div>
                  <div class="labelItems">
                    <el-radio label="3">无需审批，按打卡时长计算</el-radio>
                  </div>
                </el-radio-group>
                <div>下班 <input type="text" v-model="ruleForm.holiday.startAfterOffWork" class="miniInput" size="mini"> 分钟后，计入加班</div>
                <div>当天加班少于 <input type="text" v-model="ruleForm.holiday.lessMinutesCurDay" class="miniInput" size="mini"> 分钟后，不计入加班</div>
              </el-form-item>
              <el-form-item label="扣除休息时间" prop="delivery">
                <el-switch v-model="ruleForm.holiday.allowBanRest"></el-switch>
              </el-form-item>
              <el-form-item label="计算方式" v-if="ruleForm.holiday.allowBanRest" prop="delivery">
                <el-radio-group v-model="ruleForm.holiday.banRestType">
                  <div class="clearInput">
                    <el-radio label="1">设置休息时段</el-radio>
                  </div>
                  <div v-show="ruleForm.holiday.banRestType == 1" class="clearInput">
                    <input type="text" v-model="ruleForm.holiday.restStartTime" class="miniInput"> - <input type="text" v-model="ruleForm.holiday.restEndTime" class="miniInput"></div>
                  <div class="clearInput">
                    <el-radio label="2">按加班时长扣除</el-radio>
                  </div>
                  <div v-show="ruleForm.holiday.banRestType == 2" class="clearInput">
                    每满 <input type="text" v-model="ruleForm.holiday.matchHours" class="miniInput" size="mini"> 小时，
                    扣除 <input type="text" v-model="ruleForm.holiday.banHours" class="miniInput" size="mini"> 小时
                  </div>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="记为调休或者加班" prop="delivery">
                <el-switch v-model="ruleForm.holiday.allowMakeUp"></el-switch>
              </el-form-item>
              <el-form-item v-if="ruleForm.holiday.allowMakeUp" label=" " prop="delivery">
                <el-radio-group v-model="ruleForm.holiday.makeUpType">
                  <div class="labelItems">
                    <el-radio label="1">记为调休时长，每年12月31日作废</el-radio>
                  </div>
                  <div class="labelItems">
                    <el-radio label="2">记为加班费</el-radio>
                  </div>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="dialog-footer">
              <el-button size="mini" @click="()=> dialogVisible= false" style="border-color: #3345ff;color:#3345ff;">取消</el-button>
              <el-button type="primary" size="mini" style="background: #3345ff;border:none;" @click="submitForm('ruleForm')">保存</el-button>
            </div>
          </el-form>
        </div>
      </el-dialog>
      <!--      // 删除-->
      <el-dialog title="确认删除" :visible.sync="qurenDel" width="30%" center>
        <div style="text-align: center">
          <p><i class="icon" style="color:#f48181;font-size: 40px;margin: 10px;">&#xe685;</i></p>
          <p>确认后该信息将被删除，</p>
          <p>并不可恢复，是否确认删除？</p>
        </div>
        <div class="submitBox">
          <el-button size="mini" style="color:#3345ff;" @click="qurenDel = false">取 消</el-button>
          <el-button size="mini" class="submit" type="primary" @click="confirmDel">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
        name: 'Dashboard',
        data() {
            return {
                setAtteDialog: false,
                dialogVisible: false,
                title: '创建加班规则',
                qurenDel: false,
                loading: false,
                tableData: [],
                total: 0,
                page: 1,
                delId: '',
                pageSize: 5,
                subtype: 'add',
                value: '',
                options: [],
                adminListData: [],
                ruletypeId: 1,
                overtimeUnit: 1,
                effectiveHoursEveryday : '',
                effectiveHoursEverydaySh: '',
                ruleData: [
                    {overtimeUnit: 1, name:'按分钟加班',  describe: ['员工按分钟为最小单位选择时间，考勤按小时统计报表','员工加班时长如实计算', '加班1.32小时=1.32小时']},
                    {overtimeUnit: 2, name:'按半小时加班',  describe: ['员工按分钟为最小单位选择时间，考勤按小时统计报表','员工加班时长，以半小时为单位计算，不足的不计算', '加班1.82小时=1.5小时']},
                    {overtimeUnit: 3, name:'按小时加班',  describe: ['员工按小时为最小单位选择时间，考勤按小时统计报表','员工加班时长，以小时为单位计算，不足的不计算', '加班1.82小时=1小时']},
                    {overtimeUnit: 4, name:'按半天加班',  describe: ['员工按半天为最小单位选择时间，考勤按天统计报表','员工加班时长，以半天为单位计算，不足的不计算', '加班0.75天=0.5天']},
                    {overtimeUnit: 5, name:'按天加班',  describe: ['员工按天为最小单位选择时间，考勤按天统计报表','员工加班时长，以天为单位计算，不足的不计算', '加班0.75天=0天']},
                ],
                checkList: [],
                ruleType: '1',
                orgList: [],
                atteData: {
                    hour: ''
                },
                setatteData: {
                    hour: ''
                },
                ruleForm: {
                    name: '',
                    attendGroups: '',
                },
                setRuleForm: {
                    name: '',
                    attendGroups: [],
                    alarmUnit: '1',
                    alarmHours: '',
                    workDay: {
                        allow: true,
                        computeType: '1',
                        startAfterOffWork: '',
                        lessMinutesCurDay: '',
                        allowBanRest: true,
                        banRestType: '',
                        restStartTime: '',
                        restEndTime: '',
                        matchHours: '',
                        banRestType: '1',
                        allowMakeUp: true,
                        makeUpType: '1',
                    },
                    playDay: {
                        allow: true,
                        computeType: '1',
                        startAfterOffWork: '',
                        lessMinutesCurDay: '',
                        allowBanRest: true,
                        banRestType: '',
                        restStartTime: '',
                        restEndTime: '',
                        matchHours: '',
                        banRestType: '1',
                        allowMakeUp: true,
                        makeUpType: '1',
                    },
                    holiday: {
                        allow: true,
                        computeType: '1',
                        startAfterOffWork: '',
                        lessMinutesCurDay: '',
                        allowBanRest: true,
                        banRestType: '',
                        restStartTime: '',
                        restEndTime: '',
                        matchHours: '',
                        banRestType: '1',
                        allowMakeUp: true,
                        makeUpType: '1',
                    }
                },
                rules: {
                    name: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                        {min: 1, max: 10, message: '最多输入10个中英文字符', trigger: 'blur'}
                    ],
                    attendGroups: [
                        {required: true, message: '请选择应用范围', trigger: 'change'}
                    ]
                }
            }
        },
        computed: {
            ...mapGetters([
                'name'
            ]),
        },
        created() {
            this.init()
            this.getOrgList()
            this.getattrruleData()
            this.ruleForm = this.setRuleForm
        },
        methods: {
            init() {
                this.$store.dispatch('attendance/getRuleOvertimeListAct', {page: this.page, pageSize: this.pageSize}).then((res) => {
                    this.tableData = res.rows
                    this.total = Number(res.total)
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            // 获取考勤设置
            getattrruleData(){
                this.$store.dispatch('attendance/getAtteConfigAct').then((res) => {
                    this.overtimeUnit = res.overtimeUnit
                    this.effectiveHoursEverydaySh = res.effectiveHoursEveryday
                    this.effectiveHoursEveryday = res.effectiveHoursEveryday
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            // 修改考勤设置
            changeAtteHander(){
                this.setAtteDialog = true
                this.effectiveHoursEveryday = this.effectiveHoursEverydaySh
                this.ruletypeId = this.overtimeUnit
            },
            // 保存考勤设置
            releTypeSubmit(){
                if (!this.effectiveHoursEveryday){
                    this.$message.error('请输入折算时间！')
                    return false
                }
                this.$store.dispatch('attendance/putAtteConfigAct', {overtimeUnit: this.ruletypeId,effectiveHoursEveryday:this.effectiveHoursEveryday}).then((res) => {
                    this.overtimeUnit = this.ruletypeId
                    this.effectiveHoursEverydaySh = this.effectiveHoursEveryday
                    this.setAtteDialog = false
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            showRuleChg(st, sh){
                let tr = sh ? this.overtimeUnit-1 : this.ruletypeId-1
                switch (st) {
                    case 'namedes':
                        return this.ruleData[tr].describe[0]
                    case 'rule':
                        return this.ruleData[tr].describe[1]
                    case 'des' :
                        return this.ruleData[tr].describe[2]
                    case 'val' :
                        return this.ruleData[tr].name
                }
            },
            typeRule(val, st) {
                const rule = ['为按审批时长计算', '为在审批的时间段内，按打卡时长计算', '为无需审批，按打卡时长计算']
                let ruleCont = []
                val.forEach((n, i) => {
                    if (n.ruleType == st) {
                        ruleCont.push(rule[n.computeType - 1])
                    }
                })
                return ruleCont.join('、')
            },
            addHander(val) {
                this.ruleForm = this.setRuleForm
                this.subtype = 'add'
                this.title = '添加子管理员'
                this.dialogVisible = true
            },
            submitForm(formName) {
                console.log({...this.$refs[formName].model})
                let url = this.subtype == 'add' ? 'attendance/addRuleOvertimeListAct' : 'attendance/putRuleOvertimeListAct'
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$store.dispatch(url, {...this.$refs[formName].model}).then((res) => {
                            this.dialogVisible = false
                            this.$message.success('加班规则数据提交成功！')
                            this.init()
                            this.loading = false
                        }).catch(() => {
                            this.loading = false
                        })

                    } else {
                        console.log('error submit!!');
                        this.$message.error('数据提交失败！')
                        return false;
                    }
                });
            },
            editerHander(row) {
                this.title = '编辑加班规则'
                this.subtype = 'edit'
                this.$store.dispatch('attendance/getRuleOvertimeInfoAct', {id: row.id}).then((res) => {
                    this.ruleForm = res
                    this.ruleForm.alarmUnit = String(res.alarmUnit)
                    this.ruleForm.workDay.computeType = String(res.workDay.computeType)
                    this.ruleForm.workDay.banRestType = String(res.workDay.banRestType)
                    this.ruleForm.workDay.makeUpType = String(res.workDay.makeUpType)
                    this.ruleForm.playDay.computeType = String(res.playDay.computeType)
                    this.ruleForm.playDay.banRestType = String(res.playDay.banRestType)
                    this.ruleForm.playDay.makeUpType = String(res.playDay.makeUpType)
                    this.ruleForm.holiday.computeType = String(res.holiday.computeType)
                    this.ruleForm.holiday.banRestType = String(res.holiday.banRestType)
                    this.ruleForm.holiday.makeUpType = String(res.holiday.makeUpType)
                    this.dialogVisible = true
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            delHander(row) {
                this.delId = row.id
                this.qurenDel = true
            },
            confirmDel() {
                this.$store.dispatch('attendance/delRuleOvertimeAct', {id: this.delId}).then((res) => {
                    this.qurenDel = false
                    this.$message.success('删除成功！')
                    this.init()
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            handlePageChange(val) {
                this.page = val
                this.init()
            },
            //获取简单列表
            getOrgList() {
                this.$store.dispatch('attendance/getAattendGroupLilsAct', {page:1, pageSize: 1000}).then((res) => {
                    this.orgList = res.rows
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            }
        }
    }
</script>
<style lang="scss">
  .addWorkContent {
    .el-table thead th, .el-table thead tr {
      background: #edeffd;
    }

    .pageList {
      text-align: right;
      padding: 10px 0;

      .el-pager li {
        margin: 0 5px;
        min-width: 28px;
        width: 28px;
      }

      .active {
        background: #3345ff;
        border-radius: 100%;
        color: #fff;
      }
    }

    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background: #3345ff;
      border-color: #3345ff;
    }

    .el-radio-button__orig-radio:checked + .el-radio-button__inner, .el-switch.is-checked .el-switch__core, .el-radio__input.is-checked .el-radio__inner {
      background: #3345ff;
      border-color: #3345ff;
    }

    .el-checkbox__input.is-checked + .el-checkbox__label, .el-radio__input.is-checked + .el-radio__label {
      color: #606266;
    }
  }
</style>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      .addWorkContent {
        .title {
          text-align: center;
          padding: 0 15px;
          line-height: 40px;
          background: #eceffc;
        }

        .butList {
          padding: 0 20px;
          color: #3345ff;
          font-size: 14px;
          line-height: 50px;
          span {
            display: inline-block;
            position: relative;
            top: -1px;
            text-align: center;
            font-weight: bold;
            margin-right: 2px;
            color: #fff;
            background: #3345ff;
            line-height: 12px;
            height: 14px;
            width: 14px;
            border-radius: 100%;
          }
        }

        .cont {
          padding: 0 20px;

          .tableCont {
            background: #fff;

            p {
              margin: 0px;
            }
          }

          .titlab {
            margin: 0 4px;
            font-size: 12px;
            border-radius: 4px;
            padding: 4px 10px;
          }

          .actLab {
            color: #3345ff;
            margin: 0 4px;
            cursor: pointer;
          }
        }

        .itemsLIst {
          display: flex;
          flex-wrap: wrap;
          line-height: 40px;

          .items {
            width: calc(50% - 5px);
            display: flex;
            justify-content: space-between;
            box-shadow: 2px 2px 10px #e6e6e6;
            margin: 5px 0;
            border-radius: 5px;
            padding: 10px 15px;

            .lab {
              display: inline-block;
              text-align: center;
              width: 40px;
              height: 40px;
              color: #fff;
              border-radius: 100px;
              font-size: 22px;
              margin-right: 10px;
            }
          }

          .items:nth-child(2n-1) {
            margin-right: 10px;
          }
        }

        .tit {
          line-height: 50px;
        }

        .dialog-footer {
          display: flex;
          justify-content: center;
          text-align: center;
        }
      }

      .clearInput {
        font-size: 14px;
        margin: 15px 0;
      }

      .miniInput {
        width: 50px;
        line-height: 17px;
        border-radius: 3px;
        border: solid 1px #ccc;
        padding: 3px 4px;
      }

      .addLabTit {
        text-align: center;
        margin-bottom: 15px;
      }

      .addLabCont {
        padding: 15px;
        margin: 0 50px;
        border-radius: 5px;
        margin-bottom: 15px;
        background: #f7f8fc;

        .labelItems {
          margin: 15px 0px;
        }
      }

      .submitBox {
        display: flex;
        justify-content: center;
        margin-top: 20px;

        .submit {
          background: #3345ff;
          border-color: #3345ff;
        }
      }

      .setatte {
        margin: 15px 20px;
        line-height: 25px;
        font-size: 14px;
        color: #333;

        .titAtte {

        }

        .des {
          color: #999;
          font-size: 14px;
          margin-left: 20px;
        }
      }

      .setatteDialog {
        line-height: 30px;

        .des {
          font-size: 12px;
          color: #999;
          margin-left: 70px;
        }
      }
    }
  }
</style>
